<template>
    <div>
      <!-- 卡片视图 -->
        <el-card shadow="always">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>运营</el-breadcrumb-item>
                <el-breadcrumb-item>单位管理</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 搜索框 -->
            <el-input style="width:280px;" placeholder="请输入单位名称" class="search" v-model="searchData" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>>
                <el-button slot="append" @click="searchBtn" :disabled="isDisabled">搜索</el-button>
            </el-input>
            <el-button type='primary' id='addErrand' @click='showAddDanwei'>添加单位</el-button>
            <!-- 数据列表 -->
            <el-table :data="tableData" border>
                <el-table-column type="index" label="#" width="75"></el-table-column>
                <el-table-column prop="title" label="单位名称"></el-table-column>
                <el-table-column prop="users_name" label="默认代报员"></el-table-column>
                <el-table-column prop="users_phone" label="默认代报员联系方式"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="设置默认代报员" placement="top" :enterable='false'>
                            <el-button size="mini" type="warning"  @click="bianji(scope.row)">
                                <i class="el-icon-setting" style="margin:0 auto"></i>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="p"
              :page-sizes="[15, 20, 50, 80]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            ></el-pagination>
        </el-card>

        <!-- 添加单位弹窗-->
        <el-dialog title="添加单位" :visible.sync="addDanwei" width="35%" style="text-align:center">
            <el-form label-width="100px" ref="AddFormRef" @submit.native.prevent>
                <el-form-item label="单位名称" prop="telInput" required>
                    <input type="text" class="input_" v-model="danweiName">
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDanwei = false">取消</el-button>
                <el-button type="primary" @click="trueAddDanwei">添加</el-button>
            </span>
        </el-dialog>
        
        <!-- 设置默认代报员 -->
        <el-dialog title="设置默认代报员" :visible.sync="dialogEdit" width="40%">
            <el-form class="demo-ruleForm" label-width="50%" size="small">
                <el-form-item label="单位名称:">
                    {{danweiData.title}}
                </el-form-item>
                <el-form-item label="默认代报员:">
                    {{danweiData.users_name?danweiData.users_name:'无'}}
                </el-form-item>
                <el-form-item label="默认代报员联系方式:">
                    {{danweiData.users_phone?danweiData.users_phone:'无'}}
                </el-form-item>
                <el-form-item label="可更换的代报员:" required>
                    <el-select v-model="eddefDby" placeholder="请选择">
                        <el-option
                            v-for="item in canchangeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更代报员联系方式:">
                    {{defDbyphone}}
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogEdit=false">取消</el-button>
                <el-button @click="trueEdit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {get} from "../../../../public/API/query";
import config from '../../../../public/config'

export default {
    data() {
        return {
            danweiData:{},
            //修改的默认代报员id
            eddefDby:'',
            //添加的单位名称
            danweiName:'',
            addDanwei:false,
            //列表数据
            tableData: [
                {danwei:'abc',defaultdby:'张三',dbyphone:'123456'}
            ],
            //查询参数
            p: 1,
            limit: 10,
            type:1,
            //总条数
            count: null,
            dialogVisible: false,
            currentPage4: 1,
            searchData: "",
            value: [],
            // 树形控件的属性绑定对象
            defaultProps: {
                children: "_child",
                label: "title",
            },
            treeData: [],
            dialogEdit:false,
            addGroupForm: {
                title: "",
            },
            //默认选择节点ID数组
            defaultKeys: [],
            isDisabled: false,
            userId: "",
            canchangeList:{}
        };
    },
    computed:{
        defDbyphone(){
            var phone
            for (const i in this.canchangeList) {
                if (this.canchangeList[i].id == this.eddefDby) {
                    phone = this.canchangeList[i].phone
                }
            }
            return phone
        }
    },
    methods: {
        trueAddDanwei(){
            get('operate/company/addSub',{title:this.danweiName},res=>{
                if (res.code == 200) {
                    this.$message.success('成功')
                    this.addDanwei = false
                    this.getTableData()
                }
            })
        },
        showAddDanwei(){
            this.eddefDby = ''
            get('operate/company/addPage',{},res=>{
                this.addDanwei = true
            })
        },
        //设置权限
        setRights(value) {
            
        },
        // 重置节点ID数组
        setRightDialogClose() {
            this.defaultKeys = [];
        },
        //提交权限按钮
        commitRightsBtn() {
           
        },
        //获取数据
        getTableData(){
            if (this.searchData) {
                get('operate/company/index',{
                    p:this.p,
                    limit:this.limit,
                    title:this.searchData
                },res=>{
                    this.tableData = res.data._list
                    this.count = res.data.count
                })
            }else{
                get('operate/company/index',{
                    p:this.p,
                    limit:this.limit,
                },res=>{
                    this.tableData = res.data._list
                    this.count = res.data.count
                })
            }
        },
        handleSizeChange(newSize) {
            this.limit = newSize;
            this.getTableData();
        },
        handleCurrentChange(newPage) {
            this.p = newPage;
            this.getTableData();
        },
        //添加用户组
        openAddGroupDialog() {
        },
        //添加用户组
        addGroup() {
            
        },
        //启用按钮
        enableBtn(value) {
            
        },
        //禁用按钮
        disableBtn(value) {
          
        },
        //搜索功能
        searchBtn() {
            this.getTableData()
        },
        //显示编辑弹窗
        bianji(value){
            this.dialogEdit = true
            this.danweiData = value
            this.eddefDby = ''
            get('operate/company/setInitErrandPage',{id:value.id},res=>{
                this.canchangeList = res.data.users
                console.log(res)
            })
        },
        trueEdit(){
            get('operate/company/setInitErrandSub',{id:this.danweiData.id,users_id:this.eddefDby},res=>{
                if (res.code == 200) {
                    this.dialogEdit = false
                    this.$message.success('成功')
                    this.getTableData()
                }
            })
        }
    },
    watch: {
        searchData: function() {
            if (!this.searchData) {
                this.getTableData();
            }
            if (this.searchData) {
                this.isDisabled = false;
            }
        },
    },

    created() {
        this.getTableData();
        
    },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
    margin-bottom: 30px;
}
.el-input {
    margin-bottom: 30px;
    width: 280px;
    margin-right: 30px;
}
.el-pagination {
    margin-top: 30px;
}
.addRulesWrap {
    margin-left: 80px;
}
.addRules {
    position: absolute;
    right: 25%;
    bottom: 5%;
}
.disable {
    margin-left: 15px;
}
</style>
